<!--
 * @Author: wjc
 * @Date: 2025-10-28 17:48:38
 * @LastEditors: wjc
 * @LastEditTime: 2025-10-30 17:31:18
 * @Description: 
-->
<template>
  <div class="page-content-container">
    <div class="page-header">
      <div v-if="returnRoute !== ''" class="back">
        <OptionReturn :return-route="returnRoute" size="small" class="mt-2px" />
      </div>
      <div class="title">
        <span :class="route.meta.icon"></span>
        <span class="text">{{ route.meta.title }}</span>
        <slot name="title-extra"></slot>
      </div>
    </div>
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
  import { useRoute } from 'vue-router'

  defineOptions({
    name: 'Content',
  })

  withDefaults(
    defineProps<{
      returnRoute?: string
    }>(),
    {
      returnRoute: '',
    }
  )

  const route = useRoute()
</script>

<style scoped lang="scss">
  .page-content-container {
    @apply p-4;

    .page-header {
      @apply text-color-1 p-b-5 flex;

      .title {
        @apply flex-center text-5;

        .text {
          @apply text-accent-foreground ml-1.5;
        }
      }

      .back {
        @apply relative mr-10 flex cursor-pointer;

        &::before {
          @apply w-1px h-25px top-50% translate-y--50% bg-color-dcdfe6 absolute right--5;
        }

        .return {
          @apply mb-0;
        }
      }
    }
  }
</style>
